<template>
  <el-form :ref="UserDate" label-width="100px" class="mineself">
      <div class="updateinfo">
      <el-form-item label="头像" prop="avatar" v-model="avatar">
        <el-row>   
        <img :src="UserDate.avatar" alt="" />
        <el-upload 
        action="http://localhost:9000/file/admin/upload" 
        multiple list-type="text" name="filename"
              accept="image/jpeg,image/png,image/jpg" 
              :on-preview="handlePictureCardPreview" 
              :on-remove="handleRemove"
              :on-success="handleimg">
              <el-button type="primary" size="small" plain> <el-icon><Edit /></el-icon></el-button>
              
            </el-upload></el-row>
          </el-form-item>
            <el-form-item label="证件号码" prop="idcard">
            <el-input v-model="UserDate.idcard"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="UserDate.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="telephone">
            <el-input v-model="UserDate.telephone"></el-input>
          </el-form-item>
          <el-form-item label="账号密码" prop="password">
            <el-input v-model="UserDate.password"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="place">
            <el-input v-model="UserDate.place"></el-input>
          </el-form-item>
  </div>
  </el-form>

          <el-button type="primary" @click="editadmin()"> 修改</el-button>
    
</template>
<script>
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  components: {},
  props: [],
  data() {
    return {
      UserDate: {
        avatar: "",
      },
    }
  },
  computed: {},
  watch: {},
  created() {this.getuserDate();},
  mounted() {},
  methods: {
    getuserDate() {
      //获取当前用户名和头像用*分隔开
      let token = localStorage.getItem("token");
      this.$http
        .post("/inoculations/admin/getTokenId", token)
        .then((res) => {
          if (res.statusCode == "200") {
            this.UserDate = res.data;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    handleRemove() {
      this.UserDate.avatar = 'https://theshikong-1317506207.cos.ap-guangzhou.myqcloud.com/images/1.png';

    },
    handlePictureCardPreview(filename) {
      //这里需要注意 用的img并不是file，因为接口文档给的是img，我们在upload中定义个name=“img”参数就可以了
      // 检查文件类型
      const isImage = filename.raw.type.includes("image");
      if (!isImage) {
        this.$message.error("上传文件类型必须是图片!");
        return false;
      }
      // 检查文件大小
      if (filename.size > 2 * 1024 * 1024) {
        this.$message.error(`上传文件大小不能超过2Mb`);
        this.$refs["refUpload"].handleRemove(filename);
        return false;
      }
    },
    handleimg(res) {
      console.log(res.data);
      this.UserDate.avatar = res.data;
    },
     // 编辑
     editadmin() {
      // console.log(this.UserDate);
      ElMessageBox.confirm("确认修改个人信息?", "Warning", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/inoculations/admin/save", this.UserDate)
            .then((res) => {
              if (res.statusCode == "200") {
                ElMessage({
                  message: "成功！",
                  type: "success",
                });
                this.getuserDate();
              }
            })
            .catch(() => {
              ElMessage.error("失败！");
            });
        })
        .catch(() => {
          ElMessage({
            type: "取消",
            message: "取消修改",
          });
        });
    },
  }
}

</script>
<style scoped>
.updateinfo {
  margin: 20px;
}
.updateinfo img {
  height: 80px;
  width: 80px;
}
</style>
